<template>
	<div class="flex">
		<div class="w_RecommendToday">
			<ul>
				<li v-for="(item, index) in FlavorMenuList" :key="index">
					<div class="Today_img">
						<img class="content_img" :src="getImages(item.picUrl)" alt="" />
						<div class="title_Text">
							<h1>{{ item.foodsname }}</h1>
						</div>
						<div class="love_img">
							<i
								class="iconfont"
								:class="{ 'icon-aixinD': !item.flag, 'icon-dianzan-aixinshixin': item.flag }"
								@click="changeLoveColor(item.flag, index)"
							></i>
						</div>
					</div>
					<p>夏天小吃~清爽凉皮</p>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			FlavorMenuList: [
				{
					foodsname: '日式',
					picUrl: 'https://img95.699pic.com/photo/50137/3155.jpg_wh300.jpg',
				},
				{
					foodsname: '韩式',
					picUrl: 'https://img95.699pic.com/photo/50129/3799.jpg_wh300.jpg',
				},
				{
					foodsname: '西式',
					picUrl: 'https://img95.699pic.com/photo/50053/7946.jpg_wh300.jpg!/fh/300/quality/90',
				},
				{
					foodsname: '东南亚',
					picUrl: 'https://img95.699pic.com/photo/50093/6917.jpg_wh300.jpg',
				},
			],
		};
	},
	/**
	 * @method 修改选中收藏的颜色
	 * @param {Boolean} flag 收藏状态
	 * @param {Number} index 索引
	 *  */
	methods: {
		changeLoveColor(flag, index) {
			// 判断是否登录，如果没有登录则跳转到登录页面
			if (!this.$store.state.isLogin) {
				this.$router.push('/userLogin');
			}

			if (!this.FlavorMenuList[index].flag) {
				this.$set(this.FlavorMenuList[index], 'flag', !flag);
			}
			this.FlavorMenuList[index].flag = !flag;
		},
	},
};
</script>

<style scoped>
.flex {
	display: flex;
	width: 100%;
}

.w_RecommendToday {
	width: 100%;
	box-sizing: border-box;
	overflow-y: hidden;
	border-color: #ffd719;
}

.w:first-child {
	margin-left: 15px;
}
ul {
	white-space: nowrap;
	overflow-x: auto;
	padding: 0 10px 0 5px;
}
ul::-webkit-scrollbar {
	display: none;
}
ul > li {
	display: inline-block;
	padding: 0 0 0 10px;
	border-radius: 20px;
}
ul > li > p {
	color: #3c454b;
	padding-top: 10px;
	font-weight: 700;
}
.Today_img {
	width: 300px;
	height: 200px;
	position: relative;
	border-radius: 10px;
	overflow: hidden;
}
.content_img {
	width: 100%;
	border-radius: 10px;
}
.love_img {
	width: 36px;
	height: 30px;
	position: absolute;
	bottom: 20px;
	left: 20px;
}
.love_img i {
	color: #fff;
	font-size: 35px;
}
.love_img .icon-dianzan-aixinshixin {
	color: orangered;
}
.title_Text {
	position: absolute;
	top: 20px;
	left: 20px;
	color: #fff;
	font-size: 20px;
}
.title_Text > p {
	font-weight: 700;
}
</style>
